<template>
  <el-dialog
    title="添加新字段"
    :visible.sync="isShow"
    :before-close="_handleCancelClick"
    :width="handleScreenWidthToVw(574)+'px'"
  >
    <el-form
      ref="NewFieldForm"
      :model="newFieldForm"
      :label-width="handleScreenWidthToVw(120)+'px'"
      :rules="Rules"
    >
      <el-form-item label="字段类型：">
        <el-radio-group v-model="newFieldForm.switch" @change="_handelClearForm">
          <el-radio-button label="property" @click="resetForm">属性</el-radio-button>
          <el-radio-button label="serve">服务</el-radio-button>
          <el-radio-button label="event">事件</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='property'" label="属性名称：" prop="name">
        <el-input v-model="newFieldForm.name" placeholder="请输入属性名称" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='serve'" label="服务名称：" prop="name">
        <el-input v-model="newFieldForm.name" placeholder="请输入服务名称" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='event'" label="事件名称：" prop="name">
        <el-input v-model="newFieldForm.name" placeholder="请输入事件名称" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch!=='property'" label="标识符：" prop="identifier">
        <el-input v-model="newFieldForm.identifier" placeholder="请输入标识符" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='property'" label="参数类型：" prop="type">
        <el-select v-model="newFieldForm.type" placeholder="请选择参数类型">
          <el-option label="浮点数" value="FLOAT" />
          <el-option label="长整数" value="LONG" />
          <el-option label="字符串" value="STRING" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='event'" label="事件类型：" prop="eventTypeEnum">
        <el-select v-model="newFieldForm.eventTypeEnum" placeholder="请选择事件类型">
          <el-option label="信息" value="INFO" />
          <el-option label="告警" value="ALERT" />
          <el-option label="故障" value="ERROR" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='property'" label="属性说明：" prop="remark">
        <el-input v-model="newFieldForm.remark" placeholder="请输入属性说明" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='serve'" label="服务说明：" prop="remark">
        <el-input v-model="newFieldForm.remark" placeholder="请输入服务说明" />
      </el-form-item>
      <el-form-item v-if="newFieldForm.switch==='event'" label="事件说明：" prop="remark">
        <el-input v-model="newFieldForm.remark" placeholder="请输入事件说明" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <sub-button title="提交" @subClick="_handleSubClick" />
      <cancel-button @cancelClick="_handleCancelClick" />
    </template>
  </el-dialog>
</template>

<script>
import SubButton from '@/components/sub-button/index'
import CancelButton from '@/components/cancel-button/index'
import { handleScreenWidthToVw } from '@/utils/tools'
export default {
  components: { SubButton, CancelButton },
  props: {
    isShow: { type: Boolean, default: false },
  },
  data() {
    return {
      newFieldForm: {
        switch: 'property',
        type: '',
        remark: '',
        identifier: '',
        property: '',
        metadataId: this.$route.query.id,
        eventTypeEnum: undefined,
        name: '',
      },
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        identifier: [
          {
            required: true,
            message: '标识符不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        property: [
          {
            required: true,
            message: '标识符不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        eventTypeEnum: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        type: [{ required: true, message: '请选择参数类型', trigger: 'change' }],
      }
    },
  },
  methods: {
    _handelClearForm() {
      this.$refs['NewFieldForm'].resetFields()
    },
    _handleSubClick() {
      this.$refs.NewFieldForm.validate(valid => {
        if (valid) {
          this.$emit('subClick', this.newFieldForm)
          this.$refs.NewFieldForm.resetFields()
        } else {
          return false
        }
      })
    },
    _handleCancelClick() {
      this.$emit('cancelClick')
    },
    resetForm() {
      this.$refs.NewFieldForm.resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    text-align: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #0084ee;
    background: transparent;
    border: 1px solid #0084ee;
  }

  .el-radio-button__inner {
    padding: vh(12px) vw(20px);
    font-size: vh(14px);
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }
}
</style>
